<!--
 * @Author: 陈迪秀 1170776994@qq.com
 * @Date: 2024-02-25 13:13:13
 * @LastEditors: 陈迪秀 1170776994@qq.com
 * @LastEditTime: 2024-03-01 15:11:30
 * @FilePath: \stell-mall\src\components\echarts-map\statistic.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-statistic
    :value="capacityValue"
    :suffix="decimal + (suffixShow ? '%' : '')"
  />
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useTransition } from "@vueuse/core";
const props = defineProps({
  num: {
    type: Number || String,
    required: false,
    default: 0,
  },
  suffixShow: {
    type: Boolean,
    required: false,
    default: false,
  },
  // decimal: {
  //   type: String,
  //   default: "",
  // },
});
const source = ref<any>(0);
const decimal = ref("");
const capacityValue = useTransition(source, {
  duration: 2000,
});
source.value = props?.num;
decimal.value =
  props?.num % 1 === 0 ? "" : "." + props?.num.toString().split(".")[1];
</script>
<style lang="scss" scoped>
/* 引入字体 */
@font-face {
  font-family: "CustomFont";
  src: url("../../assets/ttf/DIN-Bold.otf") format("woff2");
  /* 其他字体属性（例如 font-weight，font-style）可以在此添加 */
}
:deep(.el-statistic__suffix) {
  /* font-family: "DIN Condensed-Bold"; */
  font-family: "CustomFont", sans-serif !important;
  font-size: 50px;
  color: #1678ff;
}
:deep(.el-statistic__number) {
  font-family: "CustomFont", sans-serif !important;
}
</style>
